<template>
  <div class="tumor-statistics">
    <el-card shadow="never">
      <template #header>
        <h2>肿瘤病例统计</h2>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="stat-card">
            <h3>病例数统计</h3>
            <div class="stat-number">1,456</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-card">
            <h3>肿瘤类型分布</h3>
            <div class="chart-placeholder">饼图显示区域</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-card">
            <h3>趋势图</h3>
            <div class="chart-placeholder">折线图显示区域</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 肿瘤统计页面
</script>

<style lang="scss" scoped>
.tumor-statistics {
  .stat-card {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    
    h3 {
      margin: 0 0 16px 0;
      color: #303133;
    }
    
    .stat-number {
      font-size: 36px;
      font-weight: bold;
      color: #409eff;
    }
    
    .chart-placeholder {
      height: 200px;
      background: #f0f0f0;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #909399;
    }
  }
}
</style>